<template>
	<view>
		<carHeader :title="'订单管理'"></carHeader>
		<view class="rongqi1">
			<uni-search-bar placeholder="请输入你要搜索的内容" bgColor="#ffffff" @confirm="search" @blur="blur"  v-model="searchValue"/>
		</view>
		<view class="rongqi2">
			<view class="sl">
				共{{ list.length }}条
			</view>
			
			<view class="fw">
				<view style="width: 150rpx;">
					<uni-data-select
					    class="choose-state"
					    v-model="valueA"
					    :localdata="chooseState"
					    :clear="false"
					    @change="handleSelectChange"
					></uni-data-select>
				</view>
			</view>
		</view>

		<block v-for="(item, index) in list" :key="index">
			<view class="xq" >
				<view class="bianhao">
					<text style="font-size: 26rpx; font-weight: 600;">订单号: {{item.ddNumber}}</text>
					<!-- <view style="font-size: 26rpx;margin-left: 280rpx; color: red; font-weight: 600;"> -->
						<!-- {{this.shifu}} -->
						<text v-if="item.sjyouhui.sjyhType === '满减' && item.sjyouhui.sjyhTriggerMoney <= item.yuanPrice" style="font-size: 26rpx;margin-left: 280rpx; color: red; font-weight: 600;">
							{{item.yuanPrice - item.sjyouhui.sjyhPreferentialMoney}}元
						</text>
						<text v-else-if="item.sjyouhui.sjyhType === '满减'" style="font-size: 26rpx;margin-left: 280rpx; color: red; font-weight: 600;">
							{{item.yuanPrice}}元
						</text>
						<text v-else style="font-size: 26rpx;margin-left: 280rpx; color: red; font-weight: 600;">
							{{item.yuanPrice * item.sjyouhui.sjyhDiscount}}元
						</text>
					<!-- </view> -->
				</view>
				<view class="yonghu" style="font-size: 26rpx">
					<view class="a1" style="margin-top: 6rpx;">
						下单用户 : {{item.user.uName}}
					</view>
					<view class="a2" style="margin-top: 6rpx;">
						预约时间 : {{item.ddYuyueTime}}
					</view>
					<view class="a3" style="margin-top: 6rpx;">
						服务项目: {{item.serviceNames}}
					</view>
				</view>
				<view class="dj">
					<view class="a4" style="font-size: 20rpx;margin-top: 14rpx;color: #bebebe;">
						下单时间:{{item.ddAddtime}}
					</view>
					<view class="a5">
						<navigator  style="width: 180rpx;
							height: 50rpx;
							background-color: #1a89ff;
							border-radius: 10rpx;
							line-height: 50rpx;
							text-align: center;
							color: white;"
						:url="'/pages/orderDetails/orderDetails?ddNumber='+item.ddNumber"
						open-type="navigate">查看详情</navigator>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				valueA: 5,
				chooseState: [
				    { value: 0, text: "待支付" },
				    { value: 1, text: "待核销" },
				    { value: 2, text: "已完成" },
					{ value: 3, text: "已退款" },
					{ value: 4, text: "已取消" },
					{ value: 5, text: "全部" },
				],
				list:[],
				searchValue:'',
				shifu:''
			};
		},
		methods: {
			blur(res) {
				this.searchValue=res.value;
				this.showList()
			},
			onLoad(){
				this.showList();
			},
			showList(){
				console.log(this.$global.shopId)
				uni.request({
					url: 'http://localhost:8080/shop/dingdan/list',
					method: 'POST',
					data: {
						shopId: this.$global.shopId,
						ddNumber:this.searchValue
					},
					success: (res) => {
						this.list = res.data.rows;
						console.log(this.list)
					},
				});
			},
			handleSelectChange() {
			          if (this.valueA === 5) {  
			              return this.showList(); 
			          }  
			          const filteredList = this.list.filter(item => {  
			              return item.status === this.valueA;
			          });  
			          this.list = filteredList;  
			},
			
		}
	}
</script>

<style lang="scss">
	.a5an {
		height: 55rpx;
		margin-top: 12rpx;
		font-size: 24rpx;
		margin-bottom: 12rpx;
		color: white;
		background-color: blue;
		border-radius: 30rpx;

	}

	.dj {
		// border: 4rpx solid black;
		width: 94%;
		margin-left: 18rpx;
	}

	.yonghu {
		border-bottom: 3rpx solid #eee;
		width: 94%;
		margin-left: 18rpx;
	}

	.bianhao {
		height: 60rpx;
		border-bottom: 4rpx solid #eee;
		width: 94%;
		margin-left: 18rpx;
		margin-top: 20rpx;
	}

	.xq {
		// border: 4rpx solid black;
		width: 96%;
		margin-left: 12rpx;
		position: relative;
		top: -235rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
	}

	.dj {
		display: flex;
		justify-content: space-between;
	}

	.rongqi2 {
		width: 88%;
		display: flex;
		margin-left: 50rpx;
		justify-content: space-between;
		position: relative;
		top: -250rpx;
		// border: 4rpx solid black;
	}

	.fw {
		display: flex;
		color: #ffffff;
		margin-right: 30rpx;
	}

	.sl {
		color: #ffffff;
	}

	.rongqi1 {
		position: relative;
		top: -250rpx;
		width: 96%;
		margin-left: 14rpx;
	}

	.biankuang {
		width: 20rpx;
		height: 20rpx;
		margin-left: 20rpx;
		margin-top: 5rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.arrow-down {
		width: 10rpx;
		height: 10rpx;
		border-right: 4rpx solid white;
		border-bottom: 4rpx solid white;
		transform: rotate(45deg);
	}

	.arrow-right {
		width: 10rpx;
		height: 10rpx;
		border-top: 4rpx solid white;
		border-left: 4rpx solid white;
		transform: rotate(45deg);
	}
	.choose-state{
		color: black;
		width: 300rpx;
	}
</style>